<template>
  <el-form :inline="true" size="large">
      <el-form-item label="用户名">
        <el-select v-model="formData.userId" clearable @clear="refreshPage" placeholder="请选择用户名" style="width: 240px">
            <el-option v-for="item in classList" :key="item.id" :label="item.username" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="课程名">
        <el-select v-model="formData.courseId" clearable @clear="refreshPage" placeholder="请选择用户名" style="width: 240px">
            <el-option v-for="item in courseList" :key="item.id" :label="item.courseName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="添加时间">
            <el-date-picker v-model="daterange" value-format="YYYY-MM-DD" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :size="size"  @clear="refreshPage" />
        </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="getAllComm">搜索</el-button>
      </el-form-item>
  </el-form>
  <el-form>
      <el-table :data="visitList" border class="my-table" size="large" @selection-change="handleSelectionChange">
          <el-table-column type="selection" :selectable="selectable" width="55" />
          <el-table-column prop="id" label="ID" align="center"></el-table-column>
          <el-table-column prop="course.courseName" label="课程名称" align="center" width="400"></el-table-column>
          <el-table-column prop="sysUser.username" label="用户名称" align="center"></el-table-column>
          <el-table-column prop="orderTime" label="评价时间" align="center"></el-table-column>
          <el-table-column prop="orderState" label="支付状态" align="center">
              <template v-slot="scope">  
                  <span :class="{c1:scope.row.orderState==0,c2:scope.row.orderState==1}">{{ scope.row.orderState == 0 ? '已支付' : '未支付' }}</span>  
              </template> 
          </el-table-column>
      </el-table>
  </el-form>
<el-row>
    <el-pagination
      :page-sizes="[10, 20, 30, 40]"
      :size="size"
      :disabled="disabled"
      :background="background"
      :default-page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="pageNumChange"
    />
  </el-row>
</template>

<script setup>
//icon图标
import { Search,Refresh,Edit,CloseBold,Plus,Share,ArrowRight,Star } from '@element-plus/icons-vue'
//信息提示
import { ElForm, ElMessage, ElMessageBox, uploadProps } from 'element-plus';
//getCurrentInstance获取全局对象，用于获取axios属性
//onMounted页面加载后开始挂载执行
//watchEffect属性监听器，daterange响应后开始执行函数，这里用于获取开始时间和结束时间
import { getCurrentInstance, onMounted, ref, watchEffect,onBeforeUnmount } from 'vue';
//接收全局对象
const CurrentInstance=getCurrentInstance()
//获取全局对象挂载的naxios赋值给$http来代替naxios
const {$http}=CurrentInstance.appContext.config.globalProperties
//默认动态页码为0
const total=ref(0)
//额外定义aterange来包含formDate中的开始时间和结束时间
const daterange=ref('')
//用户数据
const classList = ref([]);
//课程数据
const courseList=ref([]);
//定义formData来接收访问地址的数据
const formData =ref({
  orderState:"",
  userId:"",
  courseId:"",
  pageNum:1 ,// 页码
  pageSize:10, // 每页展示条数
  startTime:'',
  endTime:'',
  ids:[]//多选id
})
//定义的表格数据来存放访问地址中的数据
let visitList=ref([
  
])
let visitData=ref({
  id:"",
  courseId:"",
  userId:"",
  orderTime:"",
  orderState:"",
  del:""
})
//监听函数，if else是为了防止访问空时报错，同时获取页面的开始时间和结束时间
watchEffect(function(){
  if(daterange.value){    
        formData.value.startTime=daterange.value[0]
        formData.value.endTime=daterange.value[1]
    }else{
        formData.value.startTime = '';
        formData.value.endTime = '';
    }
})
//点击搜索的清除组件，刷新页面
function refreshPage() {
    formData.value.startTime = '';
    formData.value.endTime = '';
    getAllComm();
}
//生命周期中挂载到页面加载之后开始执行
onMounted(()=>{
  getAllComm()
  getListComm()
  getListComm1()
})
//获取点击的分页页码并执行搜索功能
function pageNumChange(num){
    formData.value.pageNum=num;
    getAllComm()
}
function handleSizeChange(size){
    formData.value.pageSize=size;
    getAllComm()
}
//搜索功能，将formData的定义初始属性传给访问地址，并传回来地址中的表格数据和各个属性
function getAllComm(){
  $http({
      method:"get",
      url:"http://localhost:8081/sfzy/courseOrder/page",
      params:formData.value
  }).then(res=>{ 
      visitList.value=res.data.data.list;//获取访问地址中的列表数据传给visitList
      console.log(visitList);
      
      total.value=res.data.data.total;
  })
}
function getListComm() {
    $http({
        method: "get",
        url: "http://localhost:8081/sfzy/sysUser"
    }).then(res => {
        classList.value = res.data.data;
    })
}
function getListComm1() {
    $http({
        method: "get",
        url: "http://localhost:8081/sfzy/course"
    }).then(res => {
      courseList.value = res.data.data;
    })
}
</script>
  
<style scoped>
  .demo-form-inline .el-input {--el-input-width: 220px;}
  .demo-form-inline .el-select {--el-select-width: 220px;}
  .el-link {padding: 0 5px;}
  .el-form{width: 1420px;}
  .el-input{width: 300px;}
  .form1{width: 100%;}
  .el-pagination{margin-top: 25px;}
  .coordinates{margin-left: 10px;}
  .my-table :deep(th){background-color: #1890ff;color: #ffffff;text-align: center;}
  .mendian{margin-bottom: 15px;}
  .active{color: green;}
  .avatar{
      width: 250px;
      height: 220px;
      display: block;
  }
  .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 250px;
      height: 178px;
      text-align: center;
  }
  .c1{color: #1890ff;cursor: pointer;}
  .c2{color: red;cursor: pointer;}
  .table-img {
    width: 100px; /* 根据需要调整图片宽度 */
    height: 100px; /* 根据需要调整图片高度 */
    object-fit: cover; /* 控制图片如何填充容器，cover会保持图片比例并填满容器 */
}
/* 星星样式 */
.star-rating {
    display: flex;
    align-items: center;
}
.filled-star {
    color: gold; /* 设置填充星星的颜色为金色，类似金星颜色，可以根据喜好调整 */
    font-size: 20px; /* 根据需要调整星星图标大小 */
    margin-right: 5px; /* 调整星星之间的间距 */
}
.empty-star {
    color: lightgray; /* 设置未填充星星的颜色 */
    font-size: 20px;
    margin-right: 5px;
}
.star-rating-table {
    display: flex;
    align-items: center;
}
.star-rating-table.filled-star {
    color: gold;
    font-size: 16px; /* 可根据表格内整体效果适当调整图标大小，此处示例设为16px */
    margin-right: 3px; /* 调整星星之间间距 */
}
.star-rating-table.empty-star {
    color: lightgray;
    font-size: 16px;
    margin-right: 3px;
}
</style>